<!DOCTYPE HTML >
<html>
    <head>
        <title>样式</title>
        <meta charset='utf-8'>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
        <style type = 'text/css'>
            div>span{
                color: #00FF00;
            }
         div   div >div{
                background: #bf314a;
            }
            #text{
                text-align: center;
                letter-spacing: 20px;
                white-space: nowrap;
                color: #00FF00;
            }
        </style>
    </head>
    <body>
    <div class='title' >颜色</div>
    <div style='text-indent: 20px'>分为前景色（color即字体颜色）和背景色（background）</div>
    <div class='title'>代码示例</div>
    <div class='code'>
        <pre>
         &lt;style type = 'text/css'&gt;
            div&gt;span{
                 <span class='red'>color</span>: #00FF00;
            }
            div   div &gt;div{
                 <span class='red'>background</span>: #bf314a;
            }
        &lt;/style&gt;
             &lt;div class='result'&gt;
    &lt;div&gt;
        &lt;span&gt;前景色&lt;/span&gt;
        &lt;div&gt;背景色&lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
        </pre>
    </div>
    <div class='title'>代码效果</div>
    <div class='result'>
    <div>
        <span>前景色</span>
        <div>背景色</div>
    </div>
    </div>
    <hr/>
    <div class='title'>字体</div>
    <table>
        <tr>
            <td style='width: 50%'> font-style</td>
            <td>  指定文本字体样式</td>
        </tr>  <tr>
            <td> font-weight</td>
            <td> 指定文本字体的粗细</td>
        </tr>  <tr>
            <td> font-size </td>
            <td> 指定文本字体尺寸</td>
        </tr>  <tr>
            <td> line-height </td>
            <td> 指定文本字体的行高</td>
        </tr>
        <tr>
            <td> font-family </td>
            <td> 指定文本使用某个字体或字体序列</td>
        </tr>

    </table>
    <div class='title'>代码示例</div>
    <div class='code'>
        <pre>
             &lt;div style=' <span class='red'>font-family</span>:"微软雅黑";
                   <span class='red'> font-style</span>: italic;
                     <span class='red'>font-weight</span>: bold;
                     <span class='red'>line-height</span>: 20px;
                     <span class='red'>font-size</span>: 16px;'&gt;
                字体为微软雅黑，16号，行高为20个像素，加粗，斜体。
            &lt;/div&gt;
        </pre>
    </div>
    <div class='title'>代码效果</div>
    <div class='result'>
        <div style='font-family:"微软雅黑";
        font-style: italic;
        font-weight: bold;
        line-height: 20px;
        font-size: 16px;'>
            字体为微软雅黑，16号，行高为20个像素，加粗，斜体。
        </div>
    </div>
        <hr/>
    <div class='title'>text</div>
    <table>
        <tr>
            <td style='width: 50%'>text-aliqn</td>
            <td>文本的水平对齐方式(center,left,right,justyle)</td>
        </tr>
        <tr>
            <td>text-indent</td>
            <td>文本的首行缩进</td>
        </tr>
        <tr>
            <td>letter-spacing</td>
            <td>字符间距</td>
        </tr>
        <tr>
            <td>white-space</td>
            <td>文本的折行</td>
        </tr>
        <tr>
            <td>text-decoration</td>
            <td>文本的装饰效果()</td>
        </tr>
    </table><br/>
    <div>text-decoration有四种<br/>
        none	默认定义标准的文本<br/>
        underline	定义文本下的一条线<br/>
        overline	定义文本上的一条线。<br/>
        line-through	定义穿过文本的一条线</div><br/>
    <div class='title'>代码示例</div>
    <div class='code'>
        <pre>
            &lt;style type = 'text/css'&gt;
                  #text{
                    <span class='red'>text-align:</span> center;
                    <span class='red'>letter-spacing:</span> 20px;
                    <span class='red'>white-space</span>: nowrap;
                      color: #00FF00;
                  }
            &lt;/style&gt;
             &lt;div id='text'&gt;
            &lt;span style='text-decoration:<span class='red'> none</span>'&gt;默认&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;
            &lt;span style='text-decoration:<span class='red'> underline</span>'&gt;从下方穿过&lt;/span&gt;&lt;br/&gt; &lt;br/&gt;
            &lt;span style='text-decoration:<span class='red'>line-through</span>'&gt;从中间穿过&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;
            &lt;span style='text-decoration:<span class='red'>overline</span>'&gt;从上方穿过&lt;/span&gt;
        &lt;/div&gt;
        </pre>
    </div>
    <div class='title'>代码效果</div>
    <div class='result'>
        <div id='text'>
            <span style='text-decoration: none'>默认</span><br/><br/>
            <span style='text-decoration: underline'>从下方穿过</span><br/> <br/>
            <span style='text-decoration:line-through'>从中间穿过</span><br/><br/>
            <span style='text-decoration:overline'>从上方穿过</span>
        </div>
    </div>
    <hr/>
    <div class='title'>
        overflow溢出样式的内容如何处理
    </div>
    <table>
        <tr>
            <td style='width: 50%;'>hidden</td>
            <td>隐藏</td>
        </tr>
        <tr>
            <td>scroll</td>
            <td>出现滚动条（无论是否超出边界）</td>
        </tr>
        <tr>
            <td>auto</td>
            <td>自动判断是否出现滚动条</td>
        </tr>
        <tr>
            <td>word-break:break-all;</td>
            <td>给数字或字母折行</td>
        </tr>
    </table>
    <div class='title'>代码示例</div>
    <div class='code'>
        <pre>
            &lt;div style='width: 60px;height: 60px;border: 1px solid #222222;overflow:<span class='red'> hidden</span>;white-space: nowrap'&gt;内容溢出时隐藏&lt;/div&gt;
            &lt;div style='width: 60px;height: 60px;border: 1px solid #222222;overflow:<span class='red'> auto</span>'&gt;自动判断是否出现滚动条&lt;/div&gt;
            &lt;div style='width: 60px;height: 60px;border: 1px solid #222222;overflow: <span class='red'>scroll</span>'&gt;出现滚动条（无论是否超出边界）&lt;/div&gt;
            &lt;div style='width: 60px;height: 60px;border: 1px solid #222222;word-break:<span class='red'> break-all</span>'&gt;11111111111111&lt;/div&gt;

        </pre>
    </div>
    <div class='title'>代码效果</div>
    <div class='result'>
        <div style='width: 60px;height: 60px;border: 1px solid #222222;overflow: hidden;white-space: nowrap'>内容溢出时隐藏</div>
        <div style='width: 60px;height: 60px;border: 1px solid #222222;overflow: auto'>自动判断是否出现滚动条</div>
        <div style='width: 60px;height: 60px;border: 1px solid #222222;overflow: scroll'>出现滚动条（无论是否超出边界）</div>
        <div style='width: 60px;height: 60px;border: 1px solid #222222;word-break: break-all'>11111111111111</div>
    </div>

    </body>
</html>